<!-- src/components/MemberList.vue -->
<script setup>
import { useTaskStore } from '@/stores/taskStore'
import { ref } from 'vue'

const store = useTaskStore()
const newMemberName = ref('')
const newMemberCapacity = ref(5)

const addMember = () => {
  if (!newMemberName.value.trim()) return
  
  store.members.push({
    id: Date.now(),
    name: newMemberName.value.trim(),
    capacity: Number(newMemberCapacity.value),
    currentLoad: 0
  })
  
  newMemberName.value = ''
  newMemberCapacity.value = 5
}

const removeMember = (memberId) => {
  // 先取消该成员的所有任务分配
  store.tasks.forEach(task => {
    if (task.assignedTo === memberId) {
      task.assignedTo = null
    }
  })
  
  // 再移除成员
  store.members = store.members.filter(m => m.id !== memberId)
}
</script>

<template>
  <div class="member-list">
    <h3>团队成员</h3>
    <div class="add-member-form">
      <input 
        v-model="newMemberName"
        placeholder="成员姓名"
        @keyup.enter="addMember"
      >
      <select v-model.number="newMemberCapacity">
        <option value="5">5个任务/天</option>
        <option value="6">6个任务/天</option>
        <option value="8">8个任务/天</option>
      </select>
      <button @click="addMember">添加</button>
    </div>
    
    <ul class="members">
      <li v-for="member in store.members" :key="member.id">
        <span>{{ member.name }} ({{ member.currentLoad }}/{{ member.capacity }})</span>
        <button @click="removeMember(member.id)">移除</button>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.member-list {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.add-member-form {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.add-member-form input {
  flex: 1;
  padding: 8px;
}

.members {
  list-style: none;
  padding: 0;
}

.members li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>